<template>
	<view class="body">
		<!-- 头部 -->
		<trade-head title="商学院"></trade-head>
		<!-- 主体内容 -->
		<view class="college-content">
			<!-- 左侧滑动内容 -->
			<view class="left">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-content">
					<view :class="active === index ? 'active' : ''" v-for="(item, index) in catelist" :key="item.id"
						@click="left(index)">
						{{ item.itemName }}
					</view>
				</scroll-view>
			</view>
			<!-- 右侧展示内容 -->
			<!-- 线下商学院 -->
			<view class="right">
			<view class="right-top">
				<view class="right-top-x">线下商学院</view>
				<view class="right-top-y">立即预约></view>	
			</view>
			<van-divider />

			
			<view class="right-top-xiangmu">
			<view class="right-top-xm">
				<!-- <image src="../icon/11.png" mode=""></image> -->
				<view class="xiangmu">项目链</view>
				<view class="kecheng">1w+课程</view>
			</view>
			<view class="right-top-xm">
				<view class="xiangmu">项目链</view>
				<view class="kecheng">1w+课程</view>
			</view>
			<view class="right-top-xm">
				<view class="xiangmu">项目链</view>
				<view class="kecheng">1w+课程</view>
			</view>
			<view class="right-top-xm">
				<view class="xiangmu">项目链</view>
				<view class="kecheng">1w+课程</view>
			</view>
			<view class="right-top-xm">
				<view class="xiangmu">项目链</view>
				<view class="kecheng">1w+课程</view>
			</view>
			</view>
			
			
			<!-- 详情 -->
			<view class="right-top-qb">
				全部课程
			</view>
		
			<view class="right-top-icon">
			<view class="right-top-icon-z">
			   <image src="../icon/矩形 2.png" mode=""></image>
			</view>
			<view class="">
				<view class="right-top-text">
					课程名称名称
				</view>
				<view class="right-top-text-1">
					课程简介课程简介课程简介课程简介课程简介课程简介
				</view>
				<view class="right-top-text-2">
					主持人：名称
				</view>
				<view class="right-top-text-3">
					发布时间2020-03-04-21   30004播放
				</view>
			</view>
			
			
			</view>
			<!-- 详情 -->	
			<view class="right-top-icon">
			<view class="right-top-icon-z">
				 <image src="../icon/矩形 2.png" mode=""></image>
			</view>
			<view class="">
				<view class="right-top-text">
					课程名称名称
				</view>
				<view class="right-top-text-1">
					课程简介课程简介课程简介课程简介课程简介课程简介
				</view>
				<view class="right-top-text-2">
					主持人：名称
				</view>
				<view class="right-top-text-3">
					发布时间2020-03-04-21   30004播放
				</view>
			</view>
			
			
			</view>
			
			<!-- 详情 -->
			<view class="right-top-icon">
			<view class="right-top-icon-z">
				 <image src="../icon/矩形 2.png" mode=""></image>
			</view>
			<view class="">
				<view class="right-top-text">
					课程名称名称
				</view>
				<view class="right-top-text-1">
					课程简介课程简介课程简介课程简介课程简介课程简介
				</view>
				<view class="right-top-text-2">
					主持人：名称
				</view>
				<view class="right-top-text-3">
					发布时间2020-03-04-21   30004播放
				</view>
			</view>
			
			
			</view>
			
			<!-- 详情 -->
				
			<view class="right-top-icon">
			<view class="right-top-icon-z">
				 <image src="../icon/矩形 2.png" mode=""></image>
			</view>
			<view class="">
				<view class="right-top-text">
					课程名称名称
				</view>
				<view class="right-top-text-1">
					课程简介课程简介课程简介课程简介课程简介课程简介
				</view>
				<view class="right-top-text-2">
					主持人：名称
				</view>
				<view class="right-top-text-3">
					发布时间2020-03-04-21   30004播放
					
				</view>		
				
			</view>	
			
			</view>	
		
			</view>	
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: '',
				// 列表项
				catelist: [{
						id: 1,
						itemName: "全部课程"
					},
					{
						id: 2,
						itemName: "餐饮课程"
					},
					{
						id: 3,
						itemName: "医疗课程"
					},
					{
						id: 4,
						itemName: "社会课程"
					},
					{
						id: 5,
						itemName: "模式学习"
					},
					{
						id: 6,
						itemName: "名企分享"
					},
					{
						id: 7,
						itemName: "实战策划"
					},
					{
						id: 8,
						itemName: "流量布局"
					}
				],
				// 当前激活项
				active: 0
			};
		},
		methods: {
			left(index) {
				this.active = index
			},
		}
	}
</script>

<style lang="scss">
	.body {
		height: 100vh;
		overflow: hidden;
		font-family: "思源黑体";
	}

	.college-content {
		width: 100%;
		height: 100vh;
		padding-top: 176rpx;
		display: flex;

		.left {
			width: 200rpx;
			background: #F7F6FB;
			padding-top: 32rpx;

			.scroll-content {
				width: 100%;
				height: 100%;

				view {
					width: 100%;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 28rpx;
					position: relative;
				}

				.active {
					background: #FFFFFF;

					&::before {
						content: "";
						display: inline-block;
						width: 6rpx;
						height: 64rpx;
						position: absolute;
						left: 0;
						top: 0;
						border-radius: 0px 100px 100px 0px;
						background: #FF8800;
					}
				}
			}
		}

		.right {
			flex: 1;
		}
		.right-top{
			display: flex;
			justify-content: space-around;
			margin: 0 auto;
		}
		 .right-top-x{
			 font-size:  40rpx;
		 }
		 .right-top-y{
			 font-size: 20rpx;
			 line-height: 60rpx;
		 }
	}
	.right-top-xm{
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #000;
		margin: 5rpx;
		border-radius: 10rpx;
		background-color: rgba(224, 224, 224, 1);
		 
	}
	
	
	.right-top-xiangmu{
		display: flex;
		.xiangmu{
			font-size: 18rpx;
			margin: 0 auto;
			line-height: 40rpx;
		}
		.kecheng{
			font-size: 8rpx;
			margin: 0 auto;
			line-height: 40rpx;
		}
	}
	.right-top-qb{
		font-size: 40rpx;
		margin-top: 30rpx;
	}
	.right-top-icon{
		display: flex;
		margin-top: 30rpx;
		.right-top-text{
			font-size: 28rpx;
		}
		.right-top-text-1{
			font-size: 16rpx;
			margin-top: 15rpx;
		}
		.right-top-text-2{
		  font-size: 20rpx;
		  margin-top: 20rpx;
		}
		.right-top-text-3{
			font-size: 14rpx;
	        margin-top: 20rpx;
		}
	}
	.right-top-icon-z image{
		width: 180rpx;
		height: 200rpx;
		border: 1px solid #000;
	}

</style>
